<template>
  <div class="ex-milestone">
    <div class="em-title">
      Milestone
    </div>
    <div class="em-content">
      <div class="progress-box">
        <div class="progress-bg" :style="{ width: `${90 / progressList.length * (activeIndex + 1)}%` }"></div>
        <div class="progress-line" :style="{ 'width': `100%` }">
          <div class="per-content" v-for="(item, index) in progressList" :key="index"
               :style="{ 'left': `${90 / progressList.length * (index + 1)}%` }" @click="clickPoint(item, index)">
            <div class="progress-content" :class="{ 'progress-active-content': activeTime === item.time }"
                 v-if="item.title !== 0">
              {{ item.title }}
            </div>
            <div class="progress-point" :class="{ 'progress-active-point': activeTime === item.time }"
                 v-if="item.title !== 0" ></div>
          </div>
        </div>
      </div>
      <div class=" mySwiper3">
        <swiper :centeredSlides=false :autoplay="{ delay: 1000, disableOnInteraction: false }"
                @swiper="onSwiper" @slideChange="onSlideChange">
          <!-- <div class="swiper-wrapper"> -->
          <swiper-slide :clickable=true v-for="( item, index ) in milestoneList " :key="index">
            <div class="em-card">
              <div class="ec-img">
                <img :src=item.thumbnailUrl>
              </div>
              <div class="ec-dsc">
                <div class="ec-title">{{ item.title }}</div>
                <div class="ec-content">{{ item.des }}</div>
                <div class="ec-date">{{ dateFilter(item.publishTime, "MM/yyyy") }}</div>
              </div>
            </div>
          </swiper-slide>
          <!-- </div> -->
        </swiper>
      </div>
    </div>
    <!--        <div class="em-more-btn">-->
    <!--            All Milestone-->
    <!--        </div>-->
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue';

import {Navigation, Pagination, Scrollbar, A11y, Autoplay} from 'swiper/modules';
import {Swiper, SwiperSlide} from 'swiper/vue';
import 'swiper/scss';

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
  time: {
    type: String,
    required: false,
  },
});


const milestoneList = ref();

milestoneList.value = props.data;

const progressList = ref();
progressList.value = [];

for (let item in milestoneList.value){
    progressList.value.push({
      title: dateFilter(milestoneList.value[item].publishTime, "yyyy-MM"),
      time: milestoneList.value[item].publishTime,
      index: Number(item)
    })
}

const activeYear = ref(progressList.value[0].title);
const activeTime = ref(progressList.value[0].time);
const activeIndex = ref(0)
let swiper3 = ref();
const clickPoint = (item: any, index: number) => {
  activeYear.value = item.title;
  activeTime.value = item.time;
  activeIndex.value = index;
  swiper3.value.slideTo(item.index);
}

const onSlideChange = () => {
  activeIndex.value = swiper3.value.activeIndex
  activeTime.value = progressList.value[swiper3.value.activeIndex].time;
  activeYear.value = progressList.value[swiper3.value.activeIndex].title
};
let count = 0;

// 初始化swiper
const onSwiper = (swiper: any) => {
  swiper3.value = swiper;
  swiper3.value.slidesPerView = "auto";
};
onMounted(() => {

})
</script>
<style scoped lang="scss">
.ex-milestone {
  position: relative;
  //width: 1920px;
  padding: 0px 0 0 150px;
  background-color: #fff;
  padding-bottom: 140px;

  .em-title {
    width: 300px;
    font-size: 64px;
    font-weight: 600;
    margin-bottom: 12px;
    background-image: -webkit-linear-gradient(180deg, #26B7BC 0%, #26B7BC 30%, #BB916C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .em-content {
    width: 100%;


    .swiper {
      width: 1500px;
      margin-left: 150px;
      margin-top: 40px;

      .em-card {
        width: 1520px;
        margin-right: 32px;
        // width: 80%;
        // margin-top: 160px;
        display: inline-flex;


        .ec-img {
          // width: 500px;
          // width: 509px;
          img {
            width: 506px;
            height: 290px;
            //background-color: rgba(0, 0, 0, 0.15);
            margin-right: 100px;
            //cursor: pointer;
            object-fit: cover;
            transition: all 0.6s;
          }

        }

        .ec-dsc {
          width: 920px;
          height: 290px;

          .ec-title {
            user-select: none;
            width: 900px;
            height: 20px;
            color: #000000;
            font-size: 20px;
            margin-bottom: 16px;
          }

          .ec-content {
            width: 100%;
            height: 215px;
            font-size: 12px;
            color: #000000;
            line-height: 22px;
            margin-bottom: 24px;
          }

          .ec-date {
            color: rgba(0, 0, 0, 0.25);
            font-size: 12px;
          }
        }

      }
    }

  }

}

.progress-box {
  position: relative;
  width: 1620px;
  height: 160px;
  padding-right: 100px;

  .progress-line {
    position: absolute;
    left: 0;
    top: 85px;
    transform: translateY(-50%);
    width: 1620px;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.08);

    .per-content {
      position: absolute;
      color: rgba(0, 0, 0, 0.45);
      left: -18px;
      bottom: -12px;
      margin-left: -16px;
      z-index: 1000;
      cursor: pointer;

      .progress-point {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: radial-gradient(circle, #30363A 0%, rgba(255, 255, 0, 0) 70%);
        margin-left: 6px;
      }

      .progress-content {
        user-select: none;
        font-size: 16px;
      }
    }
  }

  .progress-bg {
    width: calc(500px / 2);
    height: 4px;
    position: absolute;
    left: 0;
    top: 85px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #C78E66 0%, #BB916C 30%, #81A08B 60%, #26B7BC 100%);
    transition: all ease 0.15s;
  }

  .progress-active-point {
    background: radial-gradient(circle, #26B7BC 0%, rgba(255, 255, 0, 0) 70%) !important;
  }

  .progress-active-content {
    color: #26B7BC;
  }
}

:deep(.swiper-slide){
  margin-right: 2px!important;
}

.em-more-btn {
  margin-top: 65px;
  width: 296px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: rgb(199, 142, 102, 0.08);
  border-bottom: 4px solid #C78E66;
  color: #000000;
  cursor: pointer;
  transition: background-color .3s;
  font-size: 16px;
}

.em-more-btn:hover {
  background: rgb(199, 142, 102, 0.38);
}
</style>